<template>
	<view class="my-banlance">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">提现明细</block>
		</cu-custom>
	<!-- 	<view class="data-total bg-gradual-orange shadow shadow-lg">
			<view class="effective-num">
				<view class="banlance-num">{{money}}</view>
				<view class="banlance-tips">当前余额</view>
			</view>

			<view class="other-info">
				<view class="all-banlance">
					{{all.toFixed(2)}}
					<view class="all-num">{{total_money}}</view>
					<view class="all-tips">累计收入</view>
				</view>
				<view class="all-banlance">
					{{all.toFixed(2)}}
					<view class="all-num">{{withdrawable_balance}}</view>
					<view class="all-tips">可提现金额</view>
				</view>
				<view class="all-banlance">
					{{all.toFixed(2)}}
					<view class="all-num">{{non_withdrawable_balance}}</view>
					<view class="all-tips">报单余额</view>
				</view>
				<view class="go-withdrawal" style="margin-left:20px;">
					<view @click="goTransfer">去转账</view>
				</view>
				<view class="go-withdrawal">
					<view @click="goDeposit">去提现</view>
				</view>
			</view>
		</view> -->

		<view class="record-contet">
			<view class="record-tab">
				<!-- <view class="tab-item income-list" :class="isActive=='entry'?'bg-grey':''" @click="switchLab('entry')">
					收入明细
				</view> -->
				<!-- <view class="tab-item spend-list" :class="isActive=='out'?'bg-grey':''" @click="switchLab('out')">提现明细</view> -->
			</view>
			<view class="record-list">
				<view class="apply-item" v-for="items in applyList" :key="items.id">
					<view class="apply-content">
						<view class="apply-title text-df" v-if="isActive!='entry'">提现到{{changeType(items)}}</view>
						<view class="apply-title text-df" v-else>{{items.memo ? items.memo : '到账'}}</view>
						<view class="apply-time text-gray">{{items.createtime | formDates}}</view>
					</view>
					<view class="apply-status solid" :class="[changeStatus(items)]" v-if="isActive!='entry'">
						{{changeText(items)}}
					</view>
					<text class="apply-num text-red">{{items.money}}<text class="money-label">元</text></text>
				</view>
				<uni-load-more :status="more" v-if="applyList.length > 0"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import banlance from '@/api/banlance';
	import user from '@/api/user';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"

	export default {
		data() {
			return {
				money: 0,
				total_money: 0,
				non_withdrawable_balance: 0,
				withdrawable_balance: 0,
				standard: 0,
				isActive: 'out',
				type: 'out',
				more: 'more',
				all: 0.00,
				page: 1,
				applyList: [],
				orderList: [],
			};
		},
		filters: {
			formDates(times) {
				var times = new Date(times * 1000);
				var year = times.getFullYear();
				var month = times.getMonth() + 1;
				var date = times.getDate();
				var hour = times.getHours();
				var minute = times.getMinutes();
				var second = times.getSeconds();
				return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
			}
		},
		onLoad() {
			this.getRecord(this.isActive);
		},
		onShow() {
			this.getUser();
		},
		components: {
			uniLoadMore
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			changeStatus() {
				return function(items) {
					switch (items.status) {
						case 1:
							return 'bg-green';
						case 2:
							return 'bg-red';
						default:
							return 'bg-black';
					}
				};
			},
			changeText() {
				return function(items) {
					switch (items.status) {
						case 1:
							return '待审核';
						case 2:
							return '已完成';
						default:
							return '已驳回';
					}
				};
			},
			changeType() {
				return function(items) {
					switch (items.types) {
						case 'wechat':
							return '微信';
						case 'weapp':
							return '微信';
						case 'alipay':
							return '支付宝';
					}
				};
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 600) {
				this.flag = true;
			} else {
				this.flag = false;
			}
		},
		onReachBottom() {
			if (this.more !== 'noMore') {
				this.more = 'loading';
				this.page++;
				this.getRecord(this.isActive);
			}
		},
		methods: {
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			async getUser() {
				try {
					const res = await user.index();
					if (res.code === 1) {
						this.total_money = res.data.user.total_money;
						this.money = res.data.user.money;
						this.non_withdrawable_balance = res.data.user.non_withdrawable_balance;
						this.withdrawable_balance = res.data.user.withdrawable_balance;
					}
				} catch (error) {
					console.error('获取用户信息失败', error);
				}
			},
			async getRecord(type) {
				try {
					const res = await banlance.getRecord({
						page: this.page,
						tab: type
					});
					if (res.code == 1) {
						this.applyList = this.applyList.concat(res.data.list);
						this.all = res.data.num;
					} else {
						console.log(res);
					}
					if (res.data.list.length <= 0) {
						this.more = 'noMore';
					} else {
						this.more = 'more';
					}
				} catch (error) {
					console.error('获取记录失败', error);
				}
			},
			goDeposit() {
				uni.navigateTo({
					url: './balance'
				});
			},
			goTransfer() {
				uni.navigateTo({
					url: './transferMoney'
				});
			},
			switchLab(e) {
				if (this.isActive == e) {
					return false;
				} else {
					this.isActive = e;
					this.applyList = [];
					this.page = 1;
					this.getRecord(this.isActive);
				}
			}
		}
	};
</script>

<style lang="less">
	.my-banlance {
		background-color: #ffffff;
		font-size: 'SimHei';
		color: #ccccc;

		.data-total {
			height: 300rpx;
			padding: 0 20rpx;
			text-align: center;

			.banlance-num {
				padding-top: 35rpx;
				font-size: 50rpx;
				font-family: Source Han Sans CN;
				padding-bottom: 5rpx;
			}
		}

		.other-info {
			height: 90rpx;
			padding: 0 15rpx;
			margin-top: 15px;
		}

		.all-banlance {
			float: left;
			margin-right: 5px;
		}

		.go-withdrawal {
			float: right;

			.view {
				border: 1rpx solid #ffffff;
				padding: 5rpx 10rpx;
				height: 50rpx;
				line-height: 40rpx;
				margin-top: 15rpx;
				border-radius: 10rpx;
			}
		}

		.record-contet {
			.record-tab {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;

				.tab-item {
					width: 100%;
					color: #555555;
					font-size: 30rpx;
				}

				.income-list {
					float: left;
				}

				.spend-list {
					float: right;
				}

				.bg-grey {
					color: #fff;
				}
			}

			.record-list {
				background-color: #f7f7f7;
			}

			.apply-item {
				height: 80rpx;
				background: #ffffff;
				padding: 0 30rpx;
				margin-bottom: 3rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.apply-content {
					// float: left;
				}

				.apply-status {
					height: 50rpx;
					line-height: 50rpx;
					width: 120rpx;
					text-align: center;
					display: inline-block;
					margin-top: 14rpx;
					border-radius: 12rpx;
				}

				.apply-time {
					font-size: 23rpx;
				}

				.apply-num {
					width: 160rpx;
					text-align: center;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}
	}
</style>